<template>
	<view class="page">
		<view class="show">
			<text>你的手机号码是：{{tell}}</text>
			<button class="btn-update" @click="updateTel()">更换</button>
		</view>
		<view class="set">
			<text class="use-text">可通过手机号登录</text>
			<uni-icons type="tune" :color="color" size=24 @click="change()"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tell:'157*****15',
				type:false,
				color:''
			}
		},
		methods: {
			change(){
				this.type = !this.type
				this.color = this.type?'blue':'';
			},
			updateTel(){
				console.log("更换手机号")
			}
		}
	}
</script>
	

<style scoped>
	.show{
		text-align: center;
		font-size: 15px;
		font-weight: 700;
		height: 30vh;
		line-height:20vh;
		margin: 5vh 10vh 1vw;
		border:1px solid snow;
		box-shadow: 0 2px 6px #888888;
	}
	.btn-update{
		font-weight: 500;
		width: 91px;
		height: 38px;
		line-height: 38px;
		border-radius: 20px;
	} 
	.set{
		margin:10vh;
		border:1px solid snow;
		box-shadow: 0 2px 6px #888888;
	}
	.uni-icons{
		float:right;
	}
	
	
</style>
